"use client"
import { Tabs,Anchor,List,Affix } from "antd";
import { useSearchParams } from "next/navigation"
import Footer from "@/app/(components)/Footer.tsx";
import { useEffect, useState,useRef } from "react";
import Advantages from "./Advantages";
import Example from "./Example";
import Implementation from "./Implementation"
import ApplicationScenarios from "./ApplicationScenarios";
import { AdvantagesInfo } from "./Advantages";
import { FunctionExpInfo } from "./Example";
import { ImplementInfo } from "./Implementation";
import {ApplySceneryInfo} from "./ApplicationScenarios";
import { AdvantagesInfos,AppliScenInfos,ImplementInfos,FunctionExpInfos,solutionBgImgs } from "./config"

export default function Solution() {
    const query = useSearchParams();
    console.log(location);
    const title = query.get("title") || ''
    const [introInfos,setIntroInfos]=useState<AdvantagesInfo[]>([])
    const [applyInfos,setApplyInfos]=useState<ApplySceneryInfo[]>([])
    const [techAdvanInfos,setTechAdvanInfos]=useState<ImplementInfo[]>([])
    const [functionExpInfo,setFunctionExpInfo]=useState<FunctionExpInfo[]>([])
    useEffect(()=>{
        const introInfos=AdvantagesInfos.filter((k)=>k.theme==title)
        const applyInfos=AppliScenInfos.filter((k)=>k.theme==title)
        const techAdvanInfos=ImplementInfos.filter((k)=>k.theme==title)
        const functionExpInfo=FunctionExpInfos.filter((k)=>k.theme==title)
        setIntroInfos(introInfos)
        setApplyInfos(applyInfos)
        setTechAdvanInfos(techAdvanInfos)
        setFunctionExpInfo(functionExpInfo)
    },[title])
    const bgImg=solutionBgImgs.find((k)=>{if(k.theme==title) return k.imgUrl})
    const bgDesc=solutionBgImgs.find((k)=>{if(k.theme==title) return k.description})
    return (
        <>
            <div className="w-full">
                <img src={bgImg?.imgUrl} className="w-full h-[500px] overflow-hidden object-cover"></img>
                <div className='absolute top-[60px] z-[999] h-[500px] inset-0 flex justify-center items-center'>
                    <div className={`w-[1100px] flex flex-col justify-center gap-[30px] text-white`}>
                        <div className="title text-[52px] front-bold">{title}</div>
                        <div className="w-[1100px] text-[20px]">{bgDesc?.description}</div>
                    </div>
                </div>
            </div>
            <Affix offsetTop={60}>
                <div className="pt-5 bg-white"  >
                    <Anchor
                        className="w-[1100px]" 
                        style={{ margin:"0 auto" }}
                        direction="horizontal"
                        targetOffset={60}
                        replace
                        items={[
                        {
                            key: 'part-1',
                            href: '#part-1',
                            title: '方案优势',
                        },
                        {
                            key: 'part-2',
                            href: '#part-2',
                            title: '方案示例',
                        },
                        {
                            key: 'part-3',
                            href: '#part-3',
                            title: '应用场景',
                        },
                        {
                            key: 'part-4',
                            href: '#part-4',
                            title: '落地案例',
                        },
                        ]}
                    />
                 </div>
            </Affix>
            <Advantages data={introInfos}/>
            <Example data={functionExpInfo}/>
            <ApplicationScenarios data={applyInfos}/>
            <Implementation data={techAdvanInfos}/>
            <Footer/>
        </>
    )
}
